<template>
  <div class="com-container">
    <el-container>
      <el-aside width="220px">
        <!-- <router-link to="/alarm">告警</router-link>
        <router-link to="/health">健康度排序</router-link>
        <router-link to="/holographic">全息</router-link>
        <router-link to="/layerd_now">当前分层健康度</router-link>
        <router-link to="/layerd_old">历史分层健康度</router-link>
        <router-link to="/map">地图</router-link> -->
      </el-aside>
      <el-container>
        <el-header height="40px">Header</el-header>
        <el-main>
          <div class="main-container">
            <!-- 地图组件 -->
            <div class="map-box shadow radius">
              <Map />
            </div>
            <!-- 健康度排序组件 -->
            <div class="health-box shadow radius">
              <health />
            </div>
            <!-- 全息健康度组件 -->
            <div class="holographic-box shadow radius">
              <holographic />
            </div>
            <!-- 当前分层健康度组件 -->
            <div class="layerd-now-box shadow radius">
              <layerd-now />
            </div>
            <!-- 历史分层健康度组件 -->
            <div class="layerd-old-box shadow radius">
              <layerd-old />
            </div>
            <!-- 告警组件 -->
            <div class="alarm-box shadow radius">
              <alarm />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Health from "@/components/Health.vue";
import Holographic from "@/components/Holographic.vue";
import LayerdNow from "@/components/LayerdNow.vue";
import LayerdOld from "@/components/LayerdOld.vue";
import Map from "@/components/Map.vue";
import Alarm from "@/components/Alarm.vue";
export default {
  components: {
    Health,
    Holographic,
    "layerd-now": LayerdNow,
    "layerd-old": LayerdOld,
    Map,
    Alarm,
  },
  data() {
    return {
      msg: "",
    };
  },
  mounted() {},
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped>
a {
  display: block;
  width: 70px;
  height: 40px;
  color: #000;
  margin-left: calc(50% - 25px);
  margin-top: 10px;
  text-decoration: none;
  background-color: #fff;
}
// 地图
.map-box {
  position: absolute;
  height: 61%;
  width: 39%;
  left: calc(50% - 250px);
  background-color: #fff;
}
// 健康度排序
.health-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 48%;
  width: 29%;
  background-color: #ccc;
}
/// 当前分层健康度
.layerd-now-box {
  position: absolute;
  top: 0;
  right: 0;
  height: 48%;
  width: 29%;
  background-color: #ccc;
}
// 历史分层健康度
.layerd-old-box {
  position: absolute;
  height: 49%;
  width: 29%;
  background-color: #ccc;
  bottom: 0;
  right: 0;
}
// 告警
.alarm-box {
  position: absolute;
  height: 49%;
  width: 29%;
  background-color: #ccc;
  bottom: 0;
}
//全息健康度
.holographic-box {
  position: absolute;
  height: 36%;
  width: 39%;
  bottom: 0;
  left: calc(50% - 250px);
  background-color: #fff;
}

.com-container {
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
  line-height: 40px;
  border: 1px solid #ccc;
}

.el-aside {
  background-color: #01204c;
  color: #333;
  text-align: center;
  // line-height: 200px;
  width: 220px;
  height: 100%;
}

.el-main {
  width: 100%;
  height: calc(100% - 64px);
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
  .main-container {
    position: relative;
    width: 100%;
    height: 100%;
    // background-color: pink;
  }
}

.el-container {
  width: 100%;
  height: 100%;
}
</style>